<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="收货地址"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      z-index="999"
    >
    </van-nav-bar>
    <van-form validate-first ref="editFormRef" @submit="editAddress">
      <van-field
        v-model="userInfo.userName"
        label="收货人"
        placeholder="收货人"
        :rules="[{ required: true, message: '请填写收货人' }]"
      />
      <van-field
        v-model="userInfo.userPhone"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: telPattern, message: '请输入正确手机号' }
        ]"
      />
      <van-field
        v-model="userInfo.address.trainName"
        label="列车次号"
        placeholder="列车次号"
        :rules="[{ required: true, message: '请填写列车次号' }]"
      />
      <van-field
        v-model="userInfo.address.trainNum"
        label="车厢号"
        placeholder="车厢号"
        :rules="[{ required: true, message: '请填写车厢号' }]"
      />
      <van-field
        v-model="userInfo.address.seatNum"
        label="座位号"
        placeholder="座位号"
        :rules="[{ required: true, message: '请填写座位号' }]"
      />
      <!-- 底部确认修改按钮 -->
      <div class="btns_edit">
        <van-button type="info" round>确认</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      userInfo: {},
      telPattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
    };
  },
  created() {
    //加载用户信息
    let userInfo = JSON.parse(window.localStorage.getItem("user"));
    this.userInfo = userInfo;
  },
  methods: {
    //点击左上角返回键
    onClickLeft() {
      this.$router.go(-1);
    },
    // 确认修改地址
    async editAddress() {
      // 将地址信息存进本地存储
      window.localStorage.setItem("user", JSON.stringify(this.userInfo));
      Toast.success("修改成功");
      this.$router.push("/mine");
    }
  }
};
</script>
<style lang="less" scoped>
.btns_edit {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  justify-content: center;
  .van-button {
    width: 100%;
  }
}
</style>
